<template>
  <view>
    <view class="team-page">
      <HeaderNav></HeaderNav>

      <view class="team-conter">
        <view class="share-card">
          <view class="row-share">
            <view class="lefts">
              <image src="/static/images/logo.png" alt="" />
            </view>
            <view class="rights">
              <!-- <view>{{ i18n.h74 }}</view> -->
              <view>{{ i18n.h150 }}: A{{ NodeLevel || 0 }}</view>
              <view>{{ address }}</view>
            </view>
          </view>
          <view class="btn" @click="copy">{{ i18n.h157 }}</view>
        </view>
        <view class="total-card">
          <view class="team-item">
            <view class="item">
              <view>{{ i18n.h151 }}</view>
              <view>{{ TeamSize || 0 }}</view>
            </view>
            <view class="item">
              <view>{{ i18n.h152 }}</view>
              <view>{{ TeamStake || 0 }}</view>
            </view>
          </view>
          <view class="grid-item">
            <view class="item">
              <view>{{ i18n.h132 }}</view>
              <view>{{ DirectReferral || 0 }}</view>
            </view>

            <view class="item">
              <view>{{ i18n.h153 }}</view>
              <view>{{ TeamReward || 0 }}</view>
            </view>
          </view>
        </view>
        <view class="labels">{{ i18n.h80 }}</view>
        <view class="search-box">
          <u-search
            :placeholder="i18n.h154"
            v-model="keyword"
            :showAction="false"
            bgColor="#ffffff"
            height="44"
            @search="toSearch"
            @clickIcon="toSearch"
            @clear="toClear"
          ></u-search>
        </view>
        <view class="row-reward">
          <view class="lefts">
            <view>{{ i18n.h155 }} </view>
            <view>{{ TeamRate || 0 }}%</view>
          </view>
          <!-- <view class="rights" @click="toSetting">
            <view class="name">{{ i18n.h83 }}</view>
            <view>
              <u-icon name="arrow-right" color="#ffffff" size="13"></u-icon>
            </view>
          </view> -->
        </view>
        <view class="list-cont">
          <view class="row-header">
            <view>{{ i18n.h84 }}</view>
            <view>{{ i18n.h156 }}</view>
            <view>{{ i18n.h139 }}</view>
            <view>{{ i18n.h161 }}</view>
            <view>{{ i18n.h86 }}</view>
          </view>
          <view v-if="list.length > 0">
            <view class="row-item" v-for="(item, index) in list" :key="index">
              <view>{{ getCaption(item.Address) }}</view>
              <view>{{ item.Power }} </view>
              <view v-if="Number(item.Rate) > 0">{{ item.Rate }}%</view>
              <view v-else>{{ item.Rate }}</view>
              <view>{{ item.TeamStake }}</view>

              <view
                v-if="item.Setting == 1"
                class="sets"
                @click="toSets(item)"
                >{{ i18n.h83 }}</view
              >
              <view v-else></view>
            </view>
          </view>
          <view v-else>
            <empty :MarginT="140"></empty>
          </view>
        </view>
      </view>
    </view>

    <FooterNav :modelKey="4" />

    <modal
      :show="badModel"
      custom
      @cancel="badModel = false"
      :title="'极差奖励设置'"
      :padding="'32rpx'"
      width="646rpx"
    >
      <view class="bad-mod">
        <view class="headers">
          <view>{{ i18n.h87 }}</view>
          <image
            src="/static/images/close.png"
            alt=""
            @click="badModel = false"
          />
        </view>
        <view class="address-input">
          <view class="unitss" @click="decrement">-</view>
          <u--input
            :placeholder="i18n.h88"
            placeholderStyle="color:#5D5D5D"
            v-model="value"
            border="none"
            readonly
            @input="handleInput"
            clearable
          ></u--input>
          <view class="unitss" @click="increment">+</view>
          <view class="rights">%</view>
        </view>
        <view class="row-tips">
          <view>{{ i18n.h89 }}</view>
          <view>{{ TeamRate || 0 }} %</view>
        </view>
        <view class="btn" @click="doSetting()">{{ i18n.h90 }}</view>
      </view>
    </modal>
  </view>
</template>
<script>
import HeaderNav from "../../components/header-nav/header-nav.vue";
import FooterNav from "@/components/footer-nav/footer-nav.vue";
import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import config from "@/config/index.js";

import {
  getTeamDatatApi,
  getTeamDirectApi,
  getTeamSetApi,
} from "@/api/module/home";
import {} from "@/common/wb3";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  props: {},
  data() {
    return {
      badModel: false, //极差奖励设置
      //是否可设置团队收益比例，为1时显示设置按钮，为0时不需要显示
      address: "",
      list: [],
      lists: [
        {
          Address: "7878y8erfwergsry78",
          Power: "111.76",
          Rate: "30",
          TeamStake: "89.22",
          setting: 1,
        },
        {
          Address: "32r578y8erfwergsry78",
          Power: "111.76",
          Rate: "10",
          TeamStake: "111.22",
          setting: 0,
        },
        {
          Address: "34278y8erfwergsry78",
          Power: "121.76",
          Rate: "340",
          TeamStake: "32245365",
          setting: 1,
        },
      ],
      resultList: [],
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        totalPage: 1,
      },
      keyword: "",
      value: "",
      NodeLevel: "", //VIP等级
      DirectReferral: "", //团队收益比例
      TeamRate: "", //团队收益比例
      TeamReward: "", //团队奖励
      TeamSize: "", //团队总质押
      TeamStake: "", //团队总质押

      setId: "",
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
  },

  created() {},
  mounted() {},
  onShow() {
    this.init();
    let parmas = uni.getStorageSync("user") ? uni.getStorageSync("user") : "";

    if (parmas !== "") {
      this.address = config.linkUrl + "?id=" + parmas;
    }
  },
  methods: {
    init() {
      this.getInfo();
      this.getList();
    },
    getInfo() {
      getTeamDatatApi().then((res) => {
        if (res.code == 0) {
          this.DirectReferral = res.data.DirectReferral; //团队收益比例
          this.TeamRate = res.data.TeamRate; //团队收益比例
          this.TeamReward = res.data.TeamReward; //团队奖励
          this.TeamSize = res.data.TeamSize; //团队总质押
          this.TeamStake = res.data.TeamStake; //团队总质押
          this.NodeLevel = res.data.NodeLevel;
        }
      });
    },
    getList() {
      const data = {
        search: this.keyword,
      };
      getTeamDirectApi(data).then((res) => {
        if (res.code == 0) {
          this.list = res.data || [];
        }
      });
    },
    handleInput(e) {
      console.log("输入", e);

      // 转换输入值为数字类型
      const num = parseInt(e, 10);
      console.log("输入num", num);
      if (isNaN(num)) {
        this.value = ""; // 如果输入无效，重置为空
      } else if (num > Number(this.TeamRate)) {
        this.value = Number(this.TeamRate); // 限制最大值为 this.TeamRate
      } else if (num < 0) {
        this.value = 0; // 限制最小值为 0
      } else {
        this.value = num; // 正常赋值
      }
    },
    increment() {
      // if (!this.value || this.value === 0) {
      //   return; // 如果值为空或等于 0，不操作
      // }
      if (this.value < Number(this.TeamRate)) {
        this.value = Math.min(this.value + 5, Number(this.TeamRate)); // 每次加 5，限制最大值为 100
        if (this.value === Number(this.TeamRate)) {
          uni.showToast({
            title: this.$t("home.h140"),
            icon: "none",
          });
        }
      }
    },
    decrement() {
      if (!this.value || this.value === 0) {
        return; // 如果值为空或等于 0，不操作
      }
      this.value = Math.max(this.value - 5, 0); // 每次减 5，限制最小值为 0
    },
    toadd() {},
    toSearch() {
      console.log("触发搜索", this.keyword);
      this.getList();
    },
    toClear() {
      console.log("清除", this.keyword);
      this.getList();
    },
    toSets(item) {
      this.setId = item.Id;
      this.value = "";
      this.badModel = true;
    },
    toSetting() {
      //当前用户设置
      this.value = "";
      this.setId = uni.getStorageSync("Id") ? uni.getStorageSync("Id") : "";
      if (this.setId == "") {
        return;
      }
      this.badModel = true;
    },
    doSetting() {
      if (this.value == "") {
        return uni.showToast({
          icon: "none",
          title: this.$t("home.h88"),
        });
      }
      const data = {
        direct_id: this.setId,
        rate: this.value,
      };
      getTeamSetApi(data).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            icon: "success",
            title: res.message,
          });
          this.badModel = false;
          this.init();
        } else {
          uni.showToast({
            icon: "none",
            title: res.message,
          });
        }
      });
    },
    copy() {
      if (this.address == "") {
        return;
      }
      uniCopy({
        content: this.address,
        success: (res) => {
          uni.showToast({
            title: this.$t("home.h25"),
            icon: "none",
          });
          this.shareModel = false;
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },

    toPage(path) {
      if (path !== "") {
        uni.navigateTo({
          url: path,
        });
      }
    },
    toLink(path) {
      window.open(path, "_blank");
    },
    toRecord(type) {
      uni.navigateTo({
        url: `/pages/home/record?type=${type}`,
      });
    },
    number2string(num) {
      num = String(num);
      var eSplit = num.split("e");
      var e = +(eSplit[1] || 0);
      var pad = "0".repeat(500);
      var numSplit = eSplit[0].split(".");
      var str;
      var numSplit1 = numSplit[1] || "";
      if (e < 0) {
        str = "0." + (pad + numSplit[0]).slice(e) + numSplit1;
      } else {
        str =
          numSplit[0] +
          (numSplit1 + pad).slice(0, e) +
          "." +
          numSplit1.slice(e);
      }
      return (
        str
          .replace(/\.?0*$/, "")
          .replace(/^0*/, "")
          .replace(/^\./, "0.") || "0"
      );
    },
    getTemp(timestamp) {
      // let timestamp = 1662537367
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        " " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
      // let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
      // 时间戳

      console.log(GMT); // 2022-09-07 15:56:07
    },
    getCaption(strings) {
      var strLength = strings.length;
      var shortName = strings.substring(0, 2);
      var shortName2 = strings.substring(strLength - 4, strLength);
      let str = `${shortName}...${shortName2}`;
      return str;
    },
  },
};
</script>
 <style lang="scss" scoped>
.team-page {
  .team-conter {
    padding: 0 32rpx 120rpx;
    .share-card {
      padding: 32rpx;
      background: #f8fafc;
      border-radius: 30rpx;
      border: 2rpx solid #e3e8ef;
      .row-share {
        display: flex;
        .lefts {
          image {
            width: 64rpx;
            height: 64rpx;
          }
        }
        .rights {
          margin-left: 24rpx;
          :nth-child(1) {
            font-weight: 600;
            font-size: 36rpx;
            color: #000000;
          }
          :nth-child(2) {
            margin-top: 16rpx;
            word-break: break-all;
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }
      .btn {
        margin-top: 48rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #835bf1;
        border-radius: 100rpx;
        color: #ffffff;
        font-size: 28rpx;
        text-align: center;
      }
    }
    .total-card {
      margin: 32rpx 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 32rpx;
      background: #f8fafc;
      border-radius: 30rpx;
      border: 2rpx solid #e3e8ef;
      .team-item {
        display: flex;
        justify-content: space-between;
        .item {
          padding: 24rpx;
          :nth-child(1) {
            font-weight: 400;
            font-size: 24rpx;
            color: #97a3b6;
          }
          :nth-child(2) {
            font-weight: 600;
            font-size: 32rpx;
            color: #835bf1;
          }
        }
      }
      .grid-item {
        display: grid;
        grid-template-columns: 278rpx 278rpx;
        justify-content: space-between;
        .item {
          padding: 24rpx;
          background: #ffffff;
          border-radius: 16rpx;
          :nth-child(1) {
            font-weight: 400;
            font-size: 24rpx;
            color: #97a3b6;
          }
          :nth-child(2) {
            margin-top: 16rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
          }
        }
      }
    }
    .labels {
      font-weight: 600;
      font-size: 36rpx;
      color: #000000;
    }
    .search-box {
      margin: 32rpx 0;
      border-radius: 64rpx;
      border: 2rpx solid #e3e8ef;
    }
    .row-reward {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f5f3fe;
      border-radius: 20rpx;
      border: 2rpx solid #dcd6fb;
      padding: 32rpx 36rpx;
      .lefts {
        display: flex;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }
        :nth-child(2) {
          margin-left: 8rpx;
          font-weight: 500 !important;
          font-size: 32rpx !important;
          color: #835bf1 !important;
        }
      }
      .rights {
        padding: 12rpx 10rpx;
        background: #835bf1;
        border-radius: 200rpx;
        display: flex;
        justify-content: center;
        align-items: baseline;

        .name {
          font-weight: 400;
          font-size: 26rpx;
          color: #ffffff;
        }
      }
    }
    .list-cont {
      margin-top: 28rpx;
      .row-header {
        padding: 16rpx 24rpx;
        display: grid;
        grid-template-columns: 18% 20% 20% 20% 18%;
        justify-content: space-between;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #97a3b6;
        }
        :nth-child(2),
        :nth-child(3),
        :nth-child(4) {
          text-align: center;
        }
        :last-child {
          text-align: right;
        }
      }
      .row-item {
        margin-bottom: 16rpx;
        padding: 26rpx 24rpx;
        background: #f8fafc;
        border-radius: 32rpx;
        display: grid;
        grid-template-columns: 18% 20% 20% 20% 18%;
        justify-content: space-between;
        align-items: center;
        view {
          font-size: 24rpx;
          color: #000000;
        }
        :nth-child(2),
        :nth-child(3),
        :nth-child(4) {
          text-align: center;
        }
        :last-child {
          text-align: right;
        }
        .sets {
          color: #835bf1 !important;
        }
      }
    }
  }
}
.bad-mod {
  .headers {
    display: flex;
    justify-content: space-between;
    view {
      font-size: 32rpx;
      color: #000000;
    }
    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .address-input {
    margin: 50rpx 0 0;
    height: 126rpx;
    background: #f8fafc;
    border-radius: 24rpx;
    border: 2rpx solid #e3e8ef;
    padding: 1rpx 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .unitss {
      border-radius: 14rpx;
      border: 1rpx solid #e3e8ef;
      width: 80rpx;
      text-align: center;
      font-weight: 500;
      font-size: 44rpx;
      color: #000000;
      margin-right: 12rpx;
    }
    .u-input {
      height: 116rpx;
      border-radius: 24rpx;
    }
    .rights {
      width: 80rpx;
      text-align: center;
    }
  }
  .row-tips {
    margin-top: 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    :nth-child(1) {
      font-weight: 500;
      font-size: 26rpx;
      color: #000000;
    }
    :nth-child(2) {
      font-weight: 500;
      font-size: 26rpx;
      color: #835bf1;
    }
  }
  .btn {
    margin-top: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 100rpx;
    color: #ffffff;
    font-size: 28rpx;
    text-align: center;
    color: #ffffff;
    background: #835bf1;
  }
}
</style>
